<template>
	<view class="content">
		<!-- 项目基本信息 -->
		<view class="box">
			<view class="cu-list menu margin-top" >
				<view class="c-photo" >
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(i,j) in partList.image">
							<view style="height: 100%;" class="swiper-item">
								<image style="height: 100%; width: 100%;" @click="toLook()" :src="i" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 常规的项目 -->
				<view class="cu-item" :class="{arrow:i.isRight}" v-for="(i,j) in contract" :key="j">
					<view class="content">
						<text>{{i.title}}</text>
					</view>
					<view class="action" :style="[{color:i.color}]">
						<text>{{i.value}}</text>
					</view>
				</view>
				
				<!-- 特殊的项目 -->
				<view class="cu-item arrow" @tap="toMoney()">
					<view class="content">
						<text>收益</text>
					</view>
					<view style="color: #AAAAAA;font-size: 28rpx;" class="action">
						<text>累计：</text>
						<text>￥{{all}}</text>
					</view>
				</view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import api from "../../../../network/index.js"
	export default {
		data() {
			return {
				id: 0, // 设备的id
				share_id: 597,
				contract:{},
				partList:{},
				moneyList:[]
			};
		},
		computed:{
			// 累计收益
			all(){
				let num=0;
				this.moneyList.forEach(res=>{
					num+=res.money
				})
				return num
			}
		},
		methods:{
			// 查看大图
			toLook(){
				let arr = []
				arr.push(this.partList.image)
				uni.previewImage({
					urls: arr
				})
			},
			// 判断合同状态
			getStatus(status,type){
				if(type == "status"){
					if(status==0)return {value:"待租",color: "#ffa23e"}
					if(status==1)return {value:"已租",color: "#39b54a"}
					if(status==2)return {value:"维修中",color: "#e54d42"}
				} else if (type == "type"){
					if(status==1)return {value:"自有",color: "#333333"}
					if(status==2)return {value:"租入",color: "#333333"}
					if(status==3)return {value:"第三方维保",color: "#333333"}
				}
			},
			toMoney(){
				// 查看累计收益
				uni.navigateTo({
					url: "../moneydetail/moneydetail?id="+this.id
				})
			},
			// 计算收益
			// 获取主机关联的订单（device_id）=>(order_id)
			getOrder(){
				const t = this
				api.request({
					url: api.DEVICE_ORDER,
					data:{
						device_id: "=,"+t.id
					}
				}).then(res=>{
					if(res.data.list=="暂无数据")return
					if(res.data.code == "200"){
						res.data.list.data.forEach(i=>{
							t.getShare(i.order_id)
						})
					}else{
						api.error(res)
					}
				}).catch(err=>api.error(err))
			},
			// 便利查询出来的订单-将订单里的主机进行筛选-得到本主机在订单里的数据-在便利主机的股东表-查到自己的股东
			getShare(id){
				const t = this
				api.request({
					url: api.PROJECT_LIST,
					data:{
						id: "=,"+id
					}
				}).then(res=>{
					if(res.data.list=="暂无数据")return
					if(res.data.code == "200"){
						// 拿到项目						
						let data = res.data.list.data[0]
						// console.log(data)
						// 拿到对应的主机
						// console.log(data.ordeDevice)
						let device = data.ordeDevice.filter((i,j)=>i.device.id==t.id)[0]
						// 拿到股东
						// console.log(device)
						let share = device.orderDeviceShare.filter((i,j)=>i.share_id == t.$store.state.user.userInfo.share_id)[0]
						// console.log(share)
						// 插入到对象里,项目名称，租赁合同编号，项目创建时间，拿到的钱
						let obj = {
							name: data.project_name,
							contract: data.contractLease.contract_name,
							money: share?share.actual_income:0,
							time: data.create_time.slice(0,7)
						}
						t.moneyList.push(obj)
					}else{
						api.error(res)
					}
				}).catch(err=>api.error(err))
			},
			// 获取项目详情
			getDetail(id){
				const t = this
				api.request({
					url: api.DEVICE_LIST,
					data:{
						id: "=,"+id
					}
				}).then(res=>{
					if(res.data.code == "200"){
						// 设备详情页面需要展示的数据
						// 必须字段
						// 设备图片
						// 设备编号，设备名称，设备型号，出厂日期，月租金，设备类型（1自有.2租入.3第三方维保），配件个数，状态，股东
						// 待商榷：备案编号，出场编号
						// 特殊字段：收益明细
						let data = res.data.list[0]
						let status = t.getStatus(data.status,"status")
						let type = t.getStatus(data.device_type_id,"type")
						let obj = {
							name: {
								title: "设备名称",
								value: data.device_name,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#000000",
								isRight: false,
							},
							device_model: {
								title: "设备型号",
								value: data.device_model,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#555555",
								isRight: false,
							},
							device_num: {
								title: "设备编号",
								value: data.device_num,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#555555",
								isRight: false,
							},
							time: {
								title: "出厂日期",
								value: data.leave_time,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#555555",
								isRight: false,
							},
							rent: {
								title: "月租金",
								value: data.rent,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#555555",
								isRight: false,
							},
							status: {
								title: "设备状态",
								value: status.value,
								icon: "home",
								iconColor: status.color,
								color: status.color,
								isRight: false,
							},
							// money: {
							// 	title: "收益明细",
							// 	value: "",
							// 	icon: "home",
							// 	iconColor: "#333333",
							// 	color: "#333333",
							// 	isRight: true,
							// },
						}
						this.contract = obj
						this.partList.image = data.device_img.split(",")
						// 查询收益
					} else {
						api.error(res)
					}
				}).catch(err=>{
					api.error(err)
				})
			}
		},
		onLoad(options) {
			this.id = options.id
			// 获得详情
			this.getDetail(options.id)
			// 查询收益
			this.getOrder()
		},
		onPullDownRefresh (){
			this.getDetail(this.id)
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding-bottom: 20rpx;
}
.c-photo{
	width: 100%;
	height: 500rpx;
	swiper{
		height: 100%;
	}
	image{
		width: 100%;
		height: 100%;
	}
}
.box{
	margin: 0 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
}
.action{
	font-size: 28rpx;
}
.cu-item{
	&:hover{
		background-color: #F5F5F5;
	}
}
</style>
